<template>
    <div>
        <el-card class="box-card">
            <template #header>
            <div class="card-header">
                <span>个人信息</span>
                <el-button class="button" type="text" @click="editHandle">编辑资料</el-button>
            </div>
            </template>
            <div class="userInfoContent">
                <el-row :gutter="8">
                    <el-col :span="5">
                        <el-row style="text-align: center">
                            <img style="width: 10rem;border-radius: 2px;margin:0 auto;border-radius:10px" :src="avatar" alt="头像">
                        </el-row>
                        <el-row style="text-align: center">
                            <!-- <el-button icon="edit" style="margin-top:1rem;margin:10px auto" @click="updateAvatar">修改头像</el-button> -->
                        </el-row>
                    </el-col>
                    <el-col :span="12" style="font-size: 1rem;line-height:1.7rem;color:#8f939c">
                        <p>姓名：{{user.username}}</p>
                        <p>角色：{{user.roleName || '暂无角色'}}</p>
                        <p>性别：{{ $filters.translate('sexStatus', user.ssex)}}</p>
                        <p>手机：{{user.mobile ? user.mobile : '暂未绑定手机'}}</p>
                        <p>邮箱：{{user.email ? user.email : '暂未绑定邮箱'}}</p>
                        <p>部门：{{user.deptName || '暂无部门'}}</p>
                        <p>描述：{{user.description}}</p>
                    </el-col>
                </el-row>
            </div>
        </el-card>

        <!-- 新增修改弹框 -->
        <addEdit :childConfig='viewData.childConfig' @upDrawerStatus="upDrawerStatusHandle" />
    </div>
</template>

<script setup>
import {reactive, computed } from 'vue'
import {useStore} from 'vuex'

const store = useStore()
const user = computed(() => store.getters.user.userInfo)
const avatar = computed(() => store.getters.avatar)

import addEdit from './addEdit.vue'

// header 搜索
const viewData = reactive({
    childConfig: { 
        title: '',
        DrawerStatus: false, //弹框状态
        initFunctionName: '', // 初始化执行的函数
        confirmFunctionName: '' //执行确认按钮框调用的函数
    }
})

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
 * 接口操作
 */


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

// 新增弹框对父组件处理
const upDrawerStatusHandle = (val) => {
    viewData.childConfig = { 
        title: '',
        DrawerStatus: val, //弹框状态
        initFunctionName: '', // 初始化执行的函数
        confirmFunctionName: '' //执行确认按钮框调用的函数
    }
}

// 修改修改表格某行数据
const editHandle = () => {
    viewData.childConfig = { 
        title: '修改个人信息',
        DrawerStatus: true, //弹框状态
        initFunctionName: '', // 初始化执行的函数
        confirmFunctionName: '' //执行确认按钮框调用的函数
    }
}
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.userInfoContent{
    padding: 18px 0;
}

</style>